<template>
  <div id="app">
    <div class="tabbar">
      <div class="title">
        <span class="h3">体育竞赛报名系统 <strong>V1.0</strong></span>
        <span class="span"></span>
      </div>

      <!-- 导航栏： -->
      <div class="tabbarlist">
        <el-menu
          :default-active="activeIndex"
          class="ul"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#fff"
        >
          <el-menu-item class="li" index="1">
            <img id="tabbar1" src="./images/tabbar/tabbar1.png" alt="" />
            <div>报名首页</div>
          </el-menu-item>

          <el-menu-item class="li" index="2">
            <img id="tabbar1" src="./images/tabbar/tabbar2.png" alt="" />
            <div>团队信息</div>
          </el-menu-item>

          <el-menu-item class="li" index="3">
            <img id="tabbar1" src="./images/tabbar/tabbar3.png" alt="" />
            <div>人员管理</div>
          </el-menu-item>

          <el-menu-item class="li" index="4">
            <img id="tabbar1" src="./images/tabbar/tabbar4.png" alt="" />
            <div>单练报名</div>
          </el-menu-item>

          <el-menu-item class="li" index="5">
            <img id="tabbar1" src="./images/tabbar/tabbar5.png" alt="" />
            <div>对练报名</div>
          </el-menu-item>

          <el-menu-item class="li" index="6">
            <img id="tabbar1" src="./images/tabbar/tabbar6.png" alt="" />
            <div>集体报名</div>
          </el-menu-item>

          <el-menu-item class="li" index="7">
            <img id="tabbar1" src="./images/tabbar/tabbar7.png" alt="" />
            <div>对抗报名</div>
          </el-menu-item>

          <el-menu-item class="li" index="8">
            <img id="tabbar1" src="./images/tabbar/tabbar8.png" alt="" />
            <div>对抗展示</div>
          </el-menu-item>

          <el-menu-item class="li" index="9">
            <img id="tabbar1" src="./images/tabbar/tabbar9.png" alt="" />
            <div>统计分析</div>
          </el-menu-item>
        </el-menu>
      </div>
    </div>

    <!-- 切换区域： -->
    <div class="tbones" v-show="tb1">
      <!-- 原形区域： -->
      <div class="tb1">
        <div class="tbone tboneTB3" @click="totb3">
          <img class="tb1img" src="../../assets/people.png" alt="" />
          <div class="tb1div">人员管理</div>
        </div>

        <div class="tbone tboneTB4">
          <img class="tb1img" src="../../assets/tb4.png" alt="" />
          <div class="tb1div">单项报名</div>
        </div>

        <div class="tbone tboneTB5">
          <img class="tb1img" src="../../assets/duikang.png" alt="" />
          <div class="tb1div">对练报名</div>
          <div class="text">第三步</div>
        </div>

        <div class="tbone tboneTB8">
          <img class="tb1img" src="../../assets/duikang.png" alt="" />
          <div class="tb1div">对抗展示</div>
          <div class="text">第六步</div>
        </div>

        <div class="tbone tboneTB7">
          <img class="tb1img" src="../../assets/duikang.png" alt="" />
          <div class="tb1div">对抗报名</div>
          <div class="text">第五步</div>
        </div>

        <div class="tbone tboneTB6">
          <img class="tb1img" src="../../assets/jtbm.png" alt="" />
          <div class="tb1div">集体报名</div>
          <div class="text">第四步</div>
        </div>
      </div>

      <!-- 显示时间区域 -->
      <div class="tbdn">
        <div>111</div>
      </div>

      <div class="right">
        <!-- 右侧支付情况 -->
        <div class="zf">
          <div class="zf1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>
          <div class="zf1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>
          <div class="zf1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>
        </div>

        <!-- 报项情况 -->
        <div class="qk">
          <div class="qk1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>

          <div class="qk1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>

          <div class="qk1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>

          <div class="qk1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>

          <div class="qk1">
            <img src="./images/tabbar/tabbar1.png" alt="" />
            <span>本队报名人数及支付</span>
          </div>
        </div>

        <!--  -->
      </div>
    </div>

    <!--  -->
    <div class="tb2" v-show="tb2"><Group /></div>

    <!-- 人员管理： -->
    <div class="tb3" v-show="tb3">
      <Staff />
    </div>

    <!-- 单练报名 -->
    <div class="tb4" v-show="tb4">
      <Single />
    </div>

    <div class="tb5" v-show="tb5"></div>
  </div>
</template>

<script>
import axios from "axios";
import Staff from "../../components/Staff.vue";
import Project from "../../components/Project.vue";
import Group from "../../components/Group.vue";
import Single from "../../components/Single.vue";

export default {
  components: { Staff, Project, Group, Single },
  data: function () {
    return {
      activeIndex: "1",
      activeIndex3: "1",
      tabbarList: [
        {
          id: 1,
          name: "报名首页",
          defaultIcon: "./images/tabbar/tabbar1.png",
          selectIcon: "./images/tabbar/tabbar1s.png",
          img: "",
          process: "",
        },
        {
          id: 2,
          name: "团队信息",
          defaultIcon: "./images/tabbar/tabbar2.png",
          selectIcon: "./images/tabbar/tabbar2s.png",
          img: "",
          process: "",
        },
        {
          id: 3,
          name: "人员管理",
          defaultIcon: "./images/tabbar/tabbar3.png",
          selectIcon: "./images/tabbar/tabbar3s.png",
          img: "",
          process: "",
        },
        {
          id: 4,
          name: "单练报名",
          defaultIcon: "./images/tabbar/tabbar4.png",
          selectIcon: "./images/tabbar/tabbar4s.png",
          img: "",
          process: "",
        },
        {
          id: 5,
          name: "对练报名",
          defaultIcon: "./images/tabbar/tabbar5.png",
          selectIcon: "./images/tabbar/tabbar5s.png",
          img: "",
          process: "第三步",
        },
        {
          id: 6,
          name: "集体报名",
          defaultIcon: "./images/tabbar/tabbar6.png",
          selectIcon: "./images/tabbar/tabbar6s.png",
          img: "",
          process: "第四步",
        },
        {
          id: 7,
          name: "对抗报名",
          defaultIcon: "./images/tabbar/tabbar7.png",
          selectIcon: "./images/tabbar/tabbar7s.png",
          img: "",
          process: "第五步",
        },
        {
          id: 8,
          name: "对抗展示",
          defaultIcon: "./images/tabbar/tabbar8.png",
          selectIcon: "./images/tabbar/tabbar8s.png",
          img: "",
          process: "第六步",
        },
        {
          id: 9,
          name: "统计分析",
          defaultIcon: "./images/tabbar/tabbar9.png",
          selectIcon: "./images/tabbar/tabbar9s.png",
          img: "",
          process: "",
        },
      ],
      tabbarSrc: [],
      indexTa: 0,
      tb1: 1,
      tb2: 0,
      tb3: 0,
      tb4: 0,
      tb5: 0,
      classificationData: "", //赛事标题和id
    };
  },
  methods: {
    goproject() {
      // console.log(1);
      this.openPopupCentered("http://localhost:8081/project", 900, 300);
    },

    // tb1原形人员管理：
    totb3() {
      this.tb3 = 1;
      this.tb1 = 0;
      this.activeIndex = "3";
    },

    toTargetPage() {},

    getTabbar() {
      axios({
        url: "http://localhost:3002/competition/home/list",
        method: "post",
        data: {},
      }).then((res) => {
        // console.log(res.data.list);
        this.tabbarList = res.data.list;
      });
    },

    // tb栏切换
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      // console.log(this.activeIndex, keyPath);
      if (key == 1) {
        this.tb1 = 1;
      } else {
        this.tb1 = 0;
      }
      if (key == 2) {
        this.tb2 = 1;
      } else {
        this.tb2 = 0;
      }
      if (key == 3) {
        this.tb3 = 1;
      } else {
        this.tb3 = 0;
      }
      if (key == 4) {
        this.tb4 = 1;
      } else {
        this.tb4 = 0;
      }
      if (key == 5) {
        this.tb5 = 1;
      } else {
        this.tb5 = 0;
      }
    },

    openPopupCentered(url, width, height) {
      // 获取屏幕宽度和高度
      var screenWidth = window.screen.width;
      var screenHeight = window.screen.height;

      // 计算窗口的left和top值，使得新窗口居中
      var left = Math.round((screenWidth - width) / 2);
      var top = Math.round((screenHeight - height) / 2);

      // 调用window.open，并设置窗口特性，包括left和top
      var windowFeatures = `width=${width},height=${height},left=${left},top=${top},location=yes,menubar=no,toolbar=no,status=no`;
      window.open(url, "_blank", windowFeatures);
    },
  },

  mounted() {
    this.getTabbar();

    this.classificationData = this.$route.params.classificationData; // 获取赛事title+id
    // console.log(this.classificationData);
  },
};
</script>
<!-- 大灰色：tbones
  白色：tb1
  小灰色：tbone
  粉色：tb2
 -->
<style lang="less" scoped>
.tbones {
  .tb1 {
    .tbone {
      transform: translateY(50%);
    }

    //单项报名
    .tboneTB4 {
      // background: rgb(206, 155, 117);
      transform: translateY(90%);
    }
    // 对抗展示
    .tboneTB8 {
      // background: rgb(209, 171, 171);
      transform: translateY(30%);
    }
  }
}

.tbone {
  width: 260px;
  height: 260px;
  border-radius: 100%;
  background-color: #1d69a089;
  border: 1px solid #1d6aa0;
  margin-right: 20px;
  cursor: pointer;
}

.tb1img {
  width: 150px;
  height: 150px;
  margin-top: 30px;
}

.tb3 {
  transform: translateY(10%);
  height: 880px !important;
}

.tbones,
.tb3,
.tb4 {
  transform-origin: top left; /* 设置缩放的原点 */
  transform: scale(0.8);
}
.tb2 {
  // background-color: rgb(160, 128, 128);
  width: 100%;
  height: 88%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 切换区域：最大的盒子 */
.tbones,
.tb3,
.tb4 {
  overflow: hidden;
  // background-color: rgb(142, 143, 148);
  width: 1920px;
  height: 832px;
  margin: 0 auto;
  position: relative; /* 确保绝对定位的子元素相对于这个父元素定位 */
  box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */
}
/* 原形：白色背景区域 */
.tb1 {
  // background-color: #fff;
  width: 1200px;
  height: 99%;
  text-align: center; /* 水平居中 */
  line-height: 30px; /* 假设容器高度为30px，则垂直居中 */
  display: flex;
  // flex-wrap: wrap; /* 允许内容换行 */
  // justify-content: space-between; /* 子元素水平间距 */
  margin: 0 auto;
  transform: translateY(0%);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */
  grid-gap: 5px; /* 列和行之间的间隙 */
}
.tb3 {
  transform: translateX(40%) !important;

  transform: scale(0.7) !important;
}
.right {
  background-color: rgb(103, 72, 72);
  width: 260px;
  height: 450px;
  /* float: right; */
  position: absolute;
  right: 40px;
  top: 200px;
  padding: 10px 10px;
}

/* 右侧支付情况 */
.zf {
  margin-bottom: 30px;
  background-color: rgb(130, 126, 124);
  border-bottom: 20px solid rgb(201, 110, 35);
  border-radius: 8px;
  padding: 10px 5px;
}

.zf1 img {
  width: 40px;
  height: 40px;
}

.qk {
  background-color: rgb(130, 124, 124);
  border-bottom: 20px solid rgb(201, 110, 35);
  border-radius: 8px;
  padding: 10px 5px;
}

.qk1 img {
  width: 40px;
  height: 40px;
}

/* 电脑区域 */
.tbdn {
  width: 300px;
  height: 100px;
  background-color: rgb(88, 82, 82);
  position: absolute; /* 绝对定位 */
  top: 0; /* 紧贴父元素顶部 */
  right: 180px;
}

/* 最后三个原形： */
.tb1 > :nth-last-child(3),
.tb1 > :nth-last-child(2),
.tb1 > :nth-last-child(1) {
  margin-top: 20px;
}

.tb1div {
  font-size: 22px;
  font-weight: 600;
  color: rgb(29, 218, 222);
  /* text-shadow: 0 0 10px #ff0000; 更大的红色发光 */
  text-shadow: 2px 2px 4px rgba(152, 231, 221, 0.5),
    /* 外部阴影 */ -2px -2px 4px rgba(136, 216, 225, 0.5); /* 内部阴影 */
}

template {
  /* width: 100vh; */
  height: 97vh;
  background: linear-gradient(#01264c, #00386e);
}
.el-menu-item {
  background-color: #fff !important;
}

.tabbar {
  /* margin-top: 10px; */
  background: linear-gradient(#133758, rgb(6, 75, 112));
  color: #6e7b82;
  display: flex;
  justify-content: flex-start;
  padding: 5px 30px;
  height: 80px;
  width: 96.1%;
  // width: 100%;
  /* transform: translateY(-8%); */
  /* transform: translateX(0.5%); */
  transform-origin: top left; /* 设置缩放的原点 */
  // transform: scale(0.96);
}

.tabbar .title {
  /* background-color: #fff; */
  padding-top: 3px;
  width: 20%;
}

.tabbar .title .h3,
.tabbar .title .span {
  display: inline-block;
  color: #5977ed;
}

.tabbar .title .h3 {
  letter-spacing: 2px;
  font-size: 20px;
  font-weight: bold;
  /* vertical-align: text-top; */
}

.tabbar .title .span {
  /* transform: translateX(2%); */
  margin-right: 20px;
}

.tabbarlist {
  width: 80%;
  /* background-color: #ccc; */
  display: flex;
  flex-direction: row;
  text-align: center;
  height: 100%;
  padding-top: 2px;
}

.tabbarlist .ul {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  height: 100%;
  transform: translateY(-22%);
}

.tabbarlist .ul .li {
  list-style-type: none;
  /* background-color: #0B2F50; */
  flex: 1;
  cursor: pointer;
  padding: 0 10px;
  background: linear-gradient(#133758, rgb(6, 75, 112));
  box-sizing: border-box;
}
.li {
  height: 99px !important;
}

.tabbarlist .ul .li div {
  margin-top: 5px;
  height: 20px;
  transform: translateY(-110%);
  font-size: 16px;
}

/* .tabbarlist .ul .li:hover {
  background-color: #0b2f50;
  background-color: #fff;
  color: white;
} */

.tabbarlist .ul .li img {
  width: 40px;
  height: 40px;
}
</style>
